import React,{useEffect} from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, theme, Dropdown, Space,Tabs } from 'antd';
import { Outlet } from 'react-router-dom';
import MyMenu from '../components/MyMenu';
import {useSelector} from "react-redux"
const { Header, Content, Sider } = Layout;


const itemsData = [
    {
        key: '1',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                1st menu item
            </a>
        ),
    },
    {
        key: '2',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                2nd menu item (disabled)
            </a>
        ),
        icon: <SmileOutlined />,
        disabled: true,
    },
    {
        key: '3',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                3rd menu item (disabled)
            </a>
        ),
        disabled: true,
    },
    {
        key: '4',
        danger: true,
        label: 'a danger item',
    },
];

const Home = () => {
    const {menus} = useSelector(state=>{
        return state.menuRD
    })
    
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const onChange = (key) => {
        console.log(key);
        //路由跳转
        
      };
    return (
        <Layout style={{ minHeight: "100vh" }}>
            {/* 头部的logo、导航 */}
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <div className="demo-logo">
                    <img width="180px" src="https://www.woniuxy.cn/static/page/icon/logo-orange.svg" alt="" />
                </div>
                {/* 操作栏 */}
                {/* <Dropdown
                    menu={{
                        itemsData,
                    }}
                >
                    <a onClick={(e) => e.preventDefault()}>
                        <Space>
                            系统操作
                            <DownOutlined />
                        </Space>
                    </a>
                </Dropdown> */}
            </Header>
            <Layout>
                <Sider
                    width={200}
                    style={{
                        background: colorBgContainer,
                    }}
                >
                    <MyMenu></MyMenu>
                </Sider>
                <Layout
                    style={{
                        padding: '0 24px 24px',
                    }}
                >
                    <Tabs defaultActiveKey="1" items={menus} onChange={onChange} />
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};
export default Home;